// 导入base.less文件
@import url(base.less);
// 声明基准值变量
@baseSize: 3.75vw;

// 头部
.suspension {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999;
   background-color: #fff;
   box-shadow: 0 (3 / @baseSize) (3 / @baseSize) #ccc;

   .m-navbar {
      padding: 0 (12 / @baseSize) 0 (18 / @baseSize);
      display: flex;
      justify-content: space-between;
      height: (44 / @baseSize);
      align-items: center;

      .logo {
         i {
            font-size: (28 / @baseSize);
            color: #fb7299;
         }
      }

      .right {
         display: flex;

         .search {
            i {
               color: #ccc;
               font-size: (22 / @baseSize);
            }
         }

         .face {
            width: (24 / @baseSize);
            height: (24 / @baseSize);
            border-radius: 50%;
            overflow: hidden;
            margin: 0 (20 / @baseSize);
         }

         .app-btn {
            width: (72 / @baseSize);
            height: (24 / @baseSize);
         }
      }
   }

   .channel-menu {
      position: relative;
      height: (40 / @baseSize);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;

      .tabs {
         flex: 1;
         overflow: hidden;

         .tabs-list {
            display: flex;

            a {
               padding: 0 (16 / @baseSize);
               // 不需要文字换行
               white-space: nowrap;
               font-size: (14 / @baseSize);
               height: (40 / @baseSize);
               line-height: (40 / @baseSize);
            }

            .line {
               position: absolute;
               left: (16 / @baseSize);
               bottom: 0;
               width: (28 / @baseSize);
               height: (2 / @baseSize);
               background-color: #fb7299;
            }
         }
      }

      .after {
         width: (40 / @baseSize);
         height: (40 / @baseSize);
         text-align: center;
         line-height: (40 / @baseSize);
         color: #ccc;

         i {
            font-size: (20 / @baseSize);
         }
      }
   }
}

// 主体部分
.m-home {
   padding: (85 / @baseSize) (5 / @baseSize) 0;

   .video-list {
      display: flex;
      // 让弹性盒子换行
      flex-wrap: wrap;

      .video-item {
         width: 50%;
         padding: (8 / @baseSize) (5 / @baseSize);

         .card {
            height: (97 / @baseSize);
            position: relative;

            .count {
               height: (27 / @baseSize);
               background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
               position: absolute;
               left: 0;
               bottom: 0;
               width: 100%;
               padding: 0 (5 / @baseSize);
               display: flex;
               justify-content: space-between;
               align-items: center;
               font-size: (12 / @baseSize);
               color: #fff;

               i {
                  vertical-align: middle;
               }
            }
         }

         .title {
            margin-top: (5 / @baseSize);
            font-size: (12 / @baseSize);
         }
      }
   }
}

// 底部模块
.footer {
   height: (38 / @baseSize);
   width: 100%;
   position: fixed;
   left: 0;
   bottom: (30 / @baseSize);

   .btn {
      margin: 0 (20 / @baseSize);
      height: (38 / @baseSize);
      background-color: #fb7299;
      border-radius: (19 / @baseSize);
      display: flex;
      justify-content: center;
      color: #fff;
      align-items: center;
      box-shadow: 0 (3 / @baseSize) (3 / @baseSize) #ccc;

      i {
         margin-right: (10 / @baseSize);
      }
   }
}